<template>
  <div class="commont-nav-bar">
    <div class="con">
      <ul class="login">
        <li v-if="isUserName"><router-link to="/loginregister"><img src="@/views/home/homeImages/路径 45@2x.png" alt=""></router-link></li>
        <li style="cursor: default" v-if="! isUserName">欢迎您，<b>{{userName}}</b>&nbsp;<i style="cursor: pointer" @click="quit">退出</i></li>
        <li><router-link to="/order"><svg t="1602759891339" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2531" width="25" height="25"><path d="M641.6 880H318.4c-60.8 0-110.4-49.6-110.4-110.4V254.4c0-60.8 49.6-110.4 110.4-110.4h388.8c60.8 0 110.4 49.6 110.4 110.4v492.8c0 12.8-11.2 24-24 24s-25.6-11.2-25.6-24V254.4c0-33.6-27.2-62.4-62.4-62.4H318.4c-33.6 0-62.4 27.2-62.4 62.4v516.8c0 33.6 27.2 62.4 62.4 62.4h324.8c12.8 0 24 11.2 24 24S656 880 641.6 880z" p-id="2532" fill="#8a8a8a"></path><path d="M608 432H352c-12.8 0-24-11.2-24-24S339.2 384 352 384h256c12.8 0 24 11.2 24 24S620.8 432 608 432zM672 608H352c-12.8 0-24-11.2-24-24S339.2 560 352 560h320c12.8 0 24 11.2 24 24S684.8 608 672 608z" p-id="2533" fill="#8a8a8a"></path></svg>订单查询</router-link></li>
      </ul>
      <ul class="nav">
        <li><router-link to="/">首页</router-link></li>
        <li><router-link to="/reservation">紫檀预定</router-link></li>
        <li><router-link to="/shop">紫檀精品</router-link></li>
        <li><router-link to="/"><img src="@/views/home/homeImages/路径 2@2x.png" alt=""></router-link></li>
        <li><router-link to="/story">紫檀故事</router-link></li>
        <li><router-link to="/information">紫檀资讯</router-link></li>
        <li><router-link to="/about">关于紫檀</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommontNavigationBar',
  data () {
    return {
      userName: '',
      userPassword: '',
      isUserName: true
    }
  },
  created () {
    this.userName = sessionStorage.getItem('userName')
    this.userPassword = sessionStorage.getItem('userPassword')
    if (sessionStorage.getItem('userName') && sessionStorage.getItem('userPassword')) {
      this.isUserName = !this.isUserName
    } else {
      this.isUserName = true
    }
  },
  methods: {
    quit () { // 退出清空账户信息
      sessionStorage.removeItem('userName')
      sessionStorage.removeItem('userPassword')
      localStorage.removeItem('userName')
      localStorage.removeItem('userPassword')
      location.reload()
      // 清空订单房
      localStorage.removeItem('cart')
      sessionStorage.removeItem('payData')
    }
  }
}
</script>

<style lang="scss" scoped>
  .commont-nav-bar{
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 3;
    .con{
      width: 1200px;
      margin: 0 auto;
      .login{
        // width: 85px;
        height: 68px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        float: right;
        li{
          margin-left: 20px;
          cursor: pointer;
          b{
            color: red;
          }
          img{
            width: 17px;
            height: 18px;
          }
          svg{
            vertical-align: middle;
          }
          a{
            color: #666666;
            font-size: 16px;
            vertical-align: middle;
          }
        }
      }
      .nav{
        width: 100%;
        height: 68px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li{
          height: 25px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 22px;
          color: #666666;
          text-align: center;
          cursor: pointer;
          a{
            text-decoration: none;
            color: #666666;
            &:hover{
              color: #333333;
            }
          }
          &:nth-child(1){
            width: 36px;
          }
          &:nth-child(2),&:nth-child(3),&:nth-child(5),&:nth-child(6),&:nth-child(7){
            width: 72px;
          }
          &:hover{
            font-size: 18px;
            color: #333333;
          }
          &:nth-child(4){
            width: 176px;
            height: 41px;
            img{
              width: 100%;
            }
          }
        }
      }
    }
  }
</style>
